<template>
  <div class="contents">
    <div class="contetn_left">
      <ItemWrap class="contetn_left-top contetn_lr-item" :list="[{title:'巡察覆盖'},{title:'组办情况'}]"
                :activeIndex.sync="leftTopIndex" :lunci="leftTopIndex===1?lunci:[]" :termId="termId" :cycleId.sync="cycleIdLeftTop">
        <LeftTop1 v-show="leftTopIndex===0" :termId="termId"></LeftTop1>
        <LeftTop2 v-if="leftTopIndex===1" :termId="termId" :cycleId="cycleIdLeftTop"></LeftTop2>
      </ItemWrap>
      <ItemWrap class="contetn_left-center contetn_lr-item" :activeIndex.sync="leftBottomIndex"
                :lunci="leftBottomIndex===0?lunci:[]" :list="[{title:'巡察成果'},{title:'模型积累'}]"
                :cycleId.sync="cycleIdLeftBottom">
        <!--        <LeftCenter />-->
        <LeftBottom1 v-show="leftBottomIndex===0" :termId="termId" :cycleId="cycleIdLeftBottom"></LeftBottom1>
        <LeftBottom2 v-if="leftBottomIndex===1"></LeftBottom2>
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <CenterMap class="contetn_center_top" />
    </div>
    <div class="contetn_right">
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        :list="[{title:'数据资源'},{title:'知识沉淀'}]"
        :levelDir="rightTopIndex===1"
        :activeIndex.sync="rightTopIndex"
      >
        <rightTop1 v-show="rightTopIndex===0"></rightTop1>
        <rightTop2 v-show="rightTopIndex===1"></rightTop2>
        <!--        <RightTop />-->
      </ItemWrap>
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        :activeIndex.sync="rightBottomIndex"
        :lunci="lunci"
        :cycleId.sync="cycleIdRightBottom"
        :list="[{title:'整改监督'},{title:'整改情况'}]"
      >
        <rightBottom1 v-show="rightBottomIndex===0" :termId="termId" :cycleId="cycleIdRightBottom"></rightBottom1>
        <rightBottom2 v-show="rightBottomIndex===1" :termId="termId" :cycleId="cycleIdRightBottom"></rightBottom2>
        <!--        <RightCenter />-->
      </ItemWrap>
    </div>
  </div>
</template>

<script>
import LeftTop1 from './LeftTop1.vue';
import LeftTop2 from './left-top2.vue';
import LeftBottom1 from './left-bottom1.vue';
import LeftBottom2 from './left-bottom2.vue';
import rightTop1 from './right-top1.vue';
import rightTop2 from './right-top2.vue';
import rightBottom1 from './right-bottom1.vue';
import rightBottom2 from './right-bottom2.vue';
import LeftTop from './left-top.vue';
import LeftCenter from './left-center.vue';
import LeftBottom from './left-bottom.vue';
import CenterMap from './center-map.vue';
import CenterBottom from './center-bottom.vue';
import RightTop from './right-top.vue';
import RightCenter from './right-center.vue';
import RightBottom from './right-bottom.vue';

export default {
  components: {
    LeftTop1,
    LeftTop2,
    LeftBottom1,
    LeftBottom2,
    rightBottom1,
    rightBottom2,
    rightTop1,
    rightTop2,
    LeftTop,
    LeftCenter,
    LeftBottom,
    CenterMap,
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
  },
  props: ['termId', 'lunci'],
  data() {
    return {
      leftTopIndex: 0,
      leftBottomIndex: 0,
      rightTopIndex: 0,
      rightBottomIndex: 0,
      cycleIdLeftTop: '',
      cycleIdLeftBottom: '',
      cycleIdRightBottom: '',
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },

  mounted() {
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
// 内容
.contents {
  .contetn_left,
  .contetn_right {
    width: 600px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 820px;
  }

  //左右两侧 三个块
  .contetn_lr-item {
    margin-bottom: 16px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    position: relative;


  }
}


@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
